<div>
	<h2>Customer Search</h2>
</div>

<div class="filter">
	<div class="navbar navbar-default">
	  <div class="navbar-header">
	  	<a class="navbar-brand">Filter</a>
	  </div>
	
	  <div class="navbar-form navbar-left">
		  <div class="input-group">
			  <input type="text" class="form-control" data-ng-model="search.lastName" placeholder="Filter by last name..." />
		  </div>
	  </div>
	</div>
</div>

<div class="filter-label">
	<b>Filtering by: {{ search.lastName }}</b>
</div>

<br/>

<div class="panel-content" data-ng-init="init()">	
	<div id="{{customer.id}}" style="min-width: 300px;" class="panel panel-primary inline" data-ng-repeat="customer in customers | filter:search:strict | orderBy:'lastName'">
        <form editable-form name="editableForm" onaftersave="save(customer.id)">
            <div class="panel-heading clearfix">
              <div class="panel-title pull-left"><b>{{customer.firstName}}&nbsp;{{customer.lastName}}</b></div>
              <div class="pull-right">
                  <button type="button" class="btn btn-default btn-xs customer_delete" data-ng-click="delete(customer.id)">
                      <span class="glyphicon glyphicon-trash" />
                  </button>
              </div>
          </div>
          <div class="panel-body clearfix">
              <div class="editable-content">{{customer.id}}</div>
              <div class="editable-content"><a id="customer_first" editable-text="customer.firstName">{{customer.firstName}}</a></div>
              <div class="editable-content"><a id="customer_last" editable-text="customer.lastName">{{customer.lastName}}</a></div>
          </div>
          <div class="panel-footer clearfix">
              <div class="pull-right">
                  <button type="button" class="btn btn-default btn-xs" data-ng-click="editableForm.$show()" data-ng-show="!editableForm.$visible">
                      <span class="glyphicon glyphicon-edit" />
                  </button>
                  <span data-ng-show="editableForm.$visible">
                      <button type="submit" class="btn btn-default btn-xs" data-ng-disabled="editableForm.$waiting">
                          <span class="glyphicon glyphicon-floppy-save" />
                      </button>
                      <button type="button" class="btn btn-default btn-xs" data-ng-disabled="editableForm.$waiting" data-ng-click="editableForm.$cancel()">
                          <span class="glyphicon glyphicon-remove" />
                      </button>
                  </span>
              </div>
            </div>
        </form>
	</div>
</div>